<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect Web Server - View Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" >

<!-- Framework CSS -->

<link rel="stylesheet" href="static/css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="static/css/blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="static/css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample page. -->
<link rel="stylesheet" href="static/css/blueprint/fancytype.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="static/css/ViewBuilder.css" type="text/css" media="screen, projection">

<!--- Code view/edit --->

<script src="../static/js/codemirror/codemirror.js"></script>
<link rel="stylesheet" href="../static/css/codemirror/codemirror.css">
<script src="../static/js/codemirror/mode/javascript.js"></script>

<style>
.CodeMirror {
	background: #f5f5f5;
	border:1px solid gray;
	font-size:12px;
}
.CodeMirror-scroll {
	overflow-y: auto;
	overflow-x: auto;
}
.CodeMirror-activeline-background {
	background: #e8f2ff !important;
}
h1 {
	font-weight:normal;
	font-size:2em;
	line-height:1;
	margin-bottom:0.5em;
}
</style>

<!-- Custom styles to override framework -->


<script src="static/js/jquery/jquery-1.9.1.js"></script>
<script src="static/js/jquery/jquery-ui.js"></script>
<script src="static/js/jquery/jquery.ui.touch-punch.js"></script>

<script src="static/js/ViewBuilder.js"></script>
</head>
<body>
<Script>
$( document ).ready(function() {
setup();
});



</Script>
<div class="container"> <br/>
  <h1><a href="/"><img src="static/images/ConnectLogo.png"  alt="Connect" style="vertical-align:middle;" ></a> Connect Web Server</h1>
  <hr>
 
  
  <h3>View Designer</h3>
  <div id="form_window">
    
    
    <!-- Designer on the left -->
    <div id="view_form" >
      <div class="span-15 " style="padding-right:4px;"> <!- -left-->
      
        <div id="form_element_controls"  class="hide">
	        <!-- NOTE: THE "form_element_controls" IS PART OF THE FORM DESIGNER UI - DO NOT DELETE !! -->
	        <img id="delete" src="static/images/FormBuilder/page_white_delete.png" alt="Delete">
        </div>
        <!-- View designer bit goes in here -->
        <div id="viewContainerWrapper">
	        <div id="viewContainer">
	      
	        			<div class="viewColumn">
		                    <div class="header">Column Header 1</div>
		                    <div class="content">Column body</div>
		                </div>     
	       				<div class="viewColumn">
		                    <div class="header">Column Header 2</div>
		                    <div class="content">Column body</div>
		                </div>   
		                <div class="viewColumn">
		                    <div class="header">Column Header 3</div>
		                    <div class="content">Column body</div>
		                </div>      
	        </div>
        </div>
         <div id="view_column_controls"  class="hide">
	        <!-- NOTE: THE "form_element_controls" IS PART OF THE FORM DESIGNER UI - DO NOT DELETE !! -->
	        <img id="delete" src="static/images/FormBuilder/delete.png" alt="Delete Column">
        </div>
        
        <br/>
        <div id="div_button" class="buttons ">
          <button id="save_design_button"> <img src="static/images/FormBuilder/disk-black.png" alt=""> Save Design</button>
        </div>
      </div>
      <!-- left --> 
      <!-- Pallette on the right -->
      <div class="span-8 last " >
      	   <div id="viewColumnAdder"><img src="static/images/FormBuilder/table-insert-column.png">New Column
                  <div class="columnContent hide">
                  	    <div class="header">Column Header</div>
	                    <div class="content">Column body</div>
	              </div>
      	   </div>	
       	 <p class="smallText ">Drag the new column to the view.</p>
        
        <br>
        <br>
        <div id="toolbox">
          <ul id="tabs">
            <li><a href="#tab_columnProperties">Column Properties</a></li>
            <li><a href="#tab_viewProperties">View Properties</a></li>
          </ul>
          <div id="tab_columnProperties" >
          	<p class="smallText ">Properties of the selected column.</p><br>
            <div class="propertyTable">
              <div class="row"><span class="name">ID:</span><span class="value">
                <input id="columnPropertyID" type=text style="background-color:#f9f9f9" readonly>
                </span></div>
              <div class="row"><span class="name">Header:</span><span class="value">
                <input id="columnPropertyHeader" type=text value="">
                </span></div>
              <div class="row"><span class="name">Formula:</span><span class="value">
                <textarea id="columnPropertyFormula"></textarea>
                </span>
                </div>
              
              <div class="row" style="text-align:center">
                <button onClick="updateColumnProperties()"><img src="static/images/FormBuilder/arrow-circle.png" alt="">Update</button>
              </div>
            </div>
            <!-- Table --> 
          </div>
          <!-- ############## End of Field Properties tab ################# -->
          
          <div id="tab_viewProperties" >
          <p class="smallText ">View properties.</p><br>
            <div class="propertyTable">
              <div class="row"><span class="name">Name:</span><span class="value">
                <input id="viewPropertyName" type=text value="">
                </span></div>
              <div class="row"><span class="name">Selection Formula:<br>
              <p class="smallText ">return True for document selection.</p></span>
              <span class="value">
                <textarea id="viewPropertySelectionFormula"></textarea>
                </span>
              </div>
             
              <div class="row" style="text-align:center">
                <button onClick="updateViewProperties()"> <img src="static/images/FormBuilder/arrow-circle.png" alt="">Update</button>
              </div>
            </div>
            <!-- Table --> 
          </div>
          <!-- ############## End of Form Properties tab ################# --> 
          
        </div>
        <!-- End toolbox --> 
      </div>
    </div>
    
    
  </div>
  <!-- Form window --> 
  
</div>
<!-- container -->
<hr>
 <div class="last quiet right"> 
          <a href="http://www.binarycube.com"><img src="static/images/logo-bw.png" width="150" /></a><br/>
      </div>
</body>
</html>